const reactive = Vue.reactive
const ref = Vue.ref
const customRef = Vue.customRef

const useDebouncedRef = (value, delay = 200) => {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

/**
 * customRef 的结构
 * 
*/
export default {
  name: 'ref-customRef',
  template: `
    <div>
      展示 customRef <br>
      customRef 对象：{{text}} <br><br>
      <input v-model="text" type="text">
      <el-button @click="update" type="primary">修改属性</el-button><br><br>
     
    </div>
  `,
  setup () {
    const text = useDebouncedRef('hello', 1000)
    console.log('customRef', text)

    const update = () => {
      // 修改后延迟刷新
      text.value = '1111' + new Date().valueOf()
    }

    return {
      text,
      update
    }
  }
}
  